<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线客服 - 访客界面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f2f5;
        }
        .chat-container {
            max-width: 800px;
            margin: 20px auto;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        .chat-header {
            background: #1890ff;
            color: white;
            padding: 15px;
            text-align: center;
        }
        .chat-messages {
            height: 400px;
            overflow-y: auto;
            padding: 20px;
        }
        .message {
            margin-bottom: 15px;
            display: flex;
            flex-direction: column;
        }
        .message.sent {
            align-items: flex-end;
        }
        .message.received {
            align-items: flex-start;
        }
        .message-content {
            max-width: 70%;
            padding: 10px 15px;
            border-radius: 15px;
            margin: 5px 0;
        }
        .sent .message-content {
            background: #1890ff;
            color: white;
        }
        .received .message-content {
            background: #f0f0f0;
            color: black;
        }
        .message-meta {
            font-size: 12px;
            color: #666;
        }
        .chat-input {
            padding: 20px;
            border-top: 1px solid #eee;
            display: flex;
            gap: 10px;
        }
        .chat-input input {
            flex: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            outline: none;
        }
        .chat-input button {
            padding: 10px 20px;
            background: #1890ff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .chat-input button:hover {
            background: #40a9ff;
        }
        .system-message {
            text-align: center;
            color: #666;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="chat-container">
        <div class="chat-header">
            <h2>在线客服</h2>
        </div>
        <div class="chat-messages" id="messageContainer"></div>
        <div class="chat-input">
            <input type="text" id="messageInput" placeholder="请输入消息...">
            <button onclick="sendMessage()">发送</button>
        </div>
    </div>

    <script>
        let ws;
        const messageContainer = document.getElementById('messageContainer');
        const messageInput = document.getElementById('messageInput');

        // 生成随机访客名称
        const visitorName = '访客' + Math.floor(Math.random() * 1000);

        // 连接WebSocket
        function connect() {
            ws = new WebSocket(`ws://${window.location.host}`);

            ws.onopen = () => {
                // 发送初始化消息
                ws.send(JSON.stringify({
                    type: 'init',
                    userType: 'visitor',
                    name: visitorName
                }));
            };

            ws.onmessage = (event) => {
                const message = JSON.parse(event.data);
                displayMessage(message);
            };

            ws.onclose = () => {
                setTimeout(connect, 1000); // 断线重连
            };
        }

        connect();

        function sendMessage() {
            const content = messageInput.value.trim();
            if (!content) return;

            ws.send(JSON.stringify({
                type: 'message',
                content: content
            }));

            messageInput.value = '';
        }

        function displayMessage(message) {
            const messageDiv = document.createElement('div');
            
            if (message.type === 'system') {
                messageDiv.className = 'system-message';
                messageDiv.textContent = message.content;
            } else {
                const isSent = message.sender === visitorName;
                messageDiv.className = `message ${isSent ? 'sent' : 'received'}`;
                
                const content = document.createElement('div');
                content.className = 'message-content';
                content.textContent = message.content;
                
                const meta = document.createElement('div');
                meta.className = 'message-meta';
                meta.textContent = `${message.sender} · ${new Date(message.timestamp).toLocaleTimeString()}`;
                
                messageDiv.appendChild(content);
                messageDiv.appendChild(meta);
            }
            
            messageContainer.appendChild(messageDiv);
            messageContainer.scrollTop = messageContainer.scrollHeight;
        }

        // 按回车发送消息
        messageInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });
    </script>
</body>
</html> 